<template>
	<div class="add-jq-dialog">
		<!--添加 负载均衡-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="添加负载均衡"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			width="30%"
			>
			
			<el-form 
				ref="addForm" 
				:rules="rules" 
				:model="addForm"
				label-width="110px"
				>
				
				
				<el-form-item label="名称：" prop="name">
					<nameInput @change="changeName" ref="nameInput"
						></nameInput>
				</el-form-item>
				
				<el-form-item label="所属集群：" prop="jq">
					<!--选择环境-->
					<jiqunSelect @change="jqChange" ref="jqselsect"></jiqunSelect>
				</el-form-item>
				
				<el-form-item label="主机：" prop="host">
					<baseSelect 
						:optionList="hostList" 
						@change="(name,v)=>{addForm.host=v}" ref="zhujiselect"></baseSelect>
					<!--<hostSelect
						ref="hostSelect"
						 @change="hostChange"></hostSelect>-->
				</el-form-item>
				
				<el-form-item label="备注：">
					<appTextarea @change="changeDESC" ref="appTextarea"></appTextarea>
				</el-form-item>
				
			</el-form>
			
			
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import jiqunSelect from "@/view/components/select/jiqunSelect";
//import hostSelect from "@/view/components/select/hostSelect";
import baseSelect from "@/view/components/select/select";
import nameInput from "@/view/components/input/nameInput";
import appTextarea from "@/view/components/textarea/textArea";
import { resourceCreat, getActiveIp } from "@/service/swagger/HaproxyController";

export default {
	name: "addJQDialog",
	components: {
		appdialog,
		jiqunSelect,
		nameInput,
		//hostSelect,
		baseSelect,
		appTextarea
	},
	data() {
		return {
			hostList: [],
			addForm: {
				name: "", // 名称
				remark: "", // 备注
				host: "", // 主机ip
				jq: "",
			},
			rules: {
				name: [
					{ required: true, message: '请输入负载名称', trigger: 'blur' },
					{ max:16,message:'名称长度不能超过16位字符'}
				],
				jq: [
					{ required: true, message: '请选择支援组', trigger: 'change' },
				],
				host: [
					{ required: true, message: '请选择一台主机', trigger: 'change' },
				],
			}
		}
	},
	mounted() {

	},
	methods: {

		open() {
			this.$refs.dialog.open();
		},
    // 表单重置
		initFrom(){
				console.log(6666, this.$refs)
			setTimeout(()=>{
				console.log(6666, this.$refs)
				for(let i in this.$refs){
					let ref = this.$refs[i]
					if(ref.reset){
						ref.reset();
					}
				}
			},90)
		},
		close(){
			this.initFrom();
			this.$refs.dialog.close();
			this.$refs.addForm.clearValidate(['name','host','jq'])
		},
		confirmAdd() {
			console.log("确认添加", this.addForm)

			// 验证表单
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					// 验证通过
					this.submitAdd();
				} else {
					setTimeout(() => {
						this.open();
					}, 50)

					return false;
				}
			});
			// 
		},
		submitAdd() {
			let params = {
				name: this.addForm.name,
				remark: this.addForm.remark,
				host: this.addForm.host,
			}
			resourceCreat(params).then(ret => {
				if (ret&&ret.code == 0) {
					this.$message({message: '创建成功',type: 'success',duration: 2000,	});
					this.$emit("addSucess")
					this.close()
				}else{
					this.close()
				}
			})
		},
		cancleAdd() {
       	this.close()
		},

		changeName(name, v) {
			console.log("name改变：", name, v)
			this.addForm.name = v;
		},
		jqChange(name, v) {
			console.log("所属集群改变：", name, v)
			this.addForm.jq = v;
			this.getHostList({ clusterId: v })

			// 		this.$refs.hostSelect.getData({
			// 			clusterId : v
			// 		})
		},
		getHostList(params) {
			if (!params || !params.clusterId) {
				return;
			}
			getActiveIp(params).then(ret => {
				if (!ret.code) {
					let arr = [];
					ret.data.forEach(el => {
						arr.push({
							label: el.ip,
							value: el.ip,
						})
					})
					this.hostList = arr;
				}
			})
		},
		// 	
		// 	hostChange(name,v){
		// 		console.log("host改变：",name,v)
		// 		this.addForm.host = v ;
		// 	},
		changeDESC(name, v) {
			console.log("备注改变：", name, v)
			this.addForm.remark = v;
		}


	}
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";
</style>